{% extends "/shared/layout.html" %}
{% block mainContent %}
<div class="header">
  <div class="wrapper">
    <ul>
      <li class="li_750">
        {% include "/shared/user_partial.html" %}
      </li>
      <li class="li_250">
        <div class="u_group">
          <dl>
            <dd></dd>
            <dd class="dd_hover">
              <a href="/social/friend_list">
                <em class="icon_friend"></em>
                <span class="label">{{pageRes.lblFriendCount}}:</span><span class="h1">{{social_info.friend_cnt}}</span>
              </a>
            </dd>
            <dd class="dd_hover">
              <a href="/social/group_list?list_type=1">
                <em class="icon_group1"></em>
                <span class="label">{{pageRes.lblMyGroup}}:</span><span class="h1">{{social_info.my_group_cnt}}</span>
              </a>
            </dd>
            <dd class="dd_hover">
              <a href="/social/group_list?list_type=2">
                <em class="icon_group2"></em>
                <span class="label">{{pageRes.lblAllGroup}}:</span><span class="h1">{{social_info.all_group_cnt}}</span>
              </a>
            </dd>
            <dd></dd>
          </dl>
          <!-- <div class="u_search">
            <input type="text" value=""/><em class="search"></em>
          </div> -->
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="wrapper group_main">
    <div id="groupTitle" class="g_type">{{pageRes.lblGroupList}}</div>
    <div class="operate_btn"><a href="/social/create_group" class="button">{{pageRes.linkCreatGroup}}</a></div>
    <div id="gridContainer"></div>
</div>
<script type="text/javascript" src="../static/scripts/views/social/etlinking.views.groupList.js"></script>
<script type="text/javascript">
  $(function() {
    nsbase.views.groupList.init({{list_type}});    
  });
</script>
{% endblock %}